<template>
  <a-collapse
    v-for="(item, index) in INFOINPUT_STEPS"
    v-model:activeKey="activeKey"
    expandIconPosition="right"
    :expand-icon="expandIcon"
    :key="item.dataKey"
  >
    <!--#expandIcon: 自定义折叠面板右边icon -->
    <template #expandIcon>
      <p style="color: #1890ff">
        {{ isFold ? '收起更多' : '展开更多' }}
        <PlusCircleOutlined v-if="!isFold" />
        <MinusCircleOutlined v-else />
      </p>
    </template>
    <a-collapse-panel @click="fold(index + 1)" :key="item.dataKey">
      <!-- template*2: 折叠面板左边标题 & 合格标签 -->
      <template v-slot:expandIcon> <CheckCircleTwoTone /> </template>
      <template #header>
        <div class="flex gap-5px">
          <h class="mr-8px">第{{ index + 1 }}步: {{ item.title }}</h>
          <!-- item.infoGroup: 合格标签 -->
          <div v-for="(info, index) in item.infoGroup" :key="index">
            <div>
              <CheckCircleTwoTone
                :twoToneColor="info.isAllPass ? '#52c41a' : '#f5222d'"
              />{{ info?.title }}
              {{ info.isAllPass ? '全部合格' : '不合格' }}
            </div>
          </div>
        </div>
      </template>
      <!-- a-descriptions: 折叠面板展开内容区 -->
      <a-descriptions
        bordered
        size="small"
        :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
      >
        <a-descriptions-item
          v-for="dct in item.desdescriptionsItems"
          :key="dct.dataIndex"
          :label="dct.title"
          :span="item.span || 24"
        >
          <!-- 动态渲染组件: 方案1:component<待设计> & 方案2: v-if|v-else-if -->
          <component :is="dct.type" :style="dct.style" v-bind="dct.attrs">{{
            dct.content
          }}</component>
        </a-descriptions-item>
      </a-descriptions>
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup>
import { INFOINPUT_STEPS } from '../static'
// icon组
import {
  CheckCircleTwoTone,
  PlusCircleOutlined,
  MinusCircleOutlined
} from '@ant-design/icons-vue'
import { inject } from 'vue'
const { activeKey, isFold, fold } = inject('modules').insepctInfoViewResult
</script>
